<template>
  <div>
    <div class="pannel">
      <!-- 我的频道 -->
      <div class="chaneel-titie">
        <span>我的频道</span>
        <van-button
          @click="delShow = !delShow"
          plain
          size="small"
          type="danger"
          >{{ delShow ? "取消" : "编辑" }}</van-button
        >
      </div>
      <!-- 我的频道标题 -->
      <van-grid :border="false" :column-num="4">
        <van-grid-item
          class="my-item"
          v-for="(item, index) in ownChannels"
          :key="item.id"
          :class="{ active: active == index }"
          @click="changeChannel(index)"
        >
          {{ item.name }}
          <!-- x-icon -->
          <van-icon
            @click="doDel(index)"
            v-show="delShow && index != 0"
            name="cross"
          />
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 可选频道 -->
    <div class="pannel">
      <!-- 我的频道 -->
      <div class="chaneel-titie">
        <span>可选频道</span>
      </div>
      <!-- 我的频道标题 -->
      <van-grid :border="false" :column-num="4">
        <van-grid-item
          v-for="item in optList"
          :key="item.id"
          @click="addChannels(item)"
        >
          {{ item.name }}
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { setChannelAPI } from "@/api";
// 导入频道本地存储
import { saveChannel, getChannel } from "@/utils/storage";
export default {
  // 获取用户频道数据，检验是否为数组不是数组会报错
  props: {
    // 必须传值，不传报错
    // 我的频道数据
    ownChannels: {
      // 表示该值一定要传不然会报错
      required: true,
      // 限制传过来的类型
      type: Array,
    },
    // 全部频道数据
    allChannels: {
      // 表示该值一定要传不然会报错
      required: true,
      // 限制传过来的类型
      type: Array,
    },
    // 向父组件要选中tab中的频道的下标
    active: {
      required: true,
      type: Number,
    },
  },
  data() {
    return {
      delShow: false,
    };
  },
  // 如果不想用form标签的标签名和value值来命名的话就要告知model
  model: {
    // 父传子的属性名
    prop: "active",
    // 子传父的事件名
    event: "changeActive",
  },
  methods: {
    async addChannels(item) {
      // 判断用户是否登录,登陆了就通过接口存储,没登录就存到本地
      this.ownChannels.push(item);
      // 处理我的频道的数据
      let channels = this.ownChannels.map((v, index) => {
        return { id: v.id, seq: index + 1 };
      });
      if (this.$store.state.tokenObj.token) {
        // 登陆了发请求存到库里
        let res = await setChannelAPI(channels);
        console.log(res);
      } else {
        // 没登录存储到本地,要先判断本地是否
        saveChannel(this.ownChannels);
      }
    },
    // 更换频道同步tab栏的频道
    changeChannel(index) {
      // 通知父组件修改active的值
      this.$emit("changeActive", index);
      //通知父元素关闭频道面板
      this.$emit("close");
    },
    // 点击删除事件
    async doDel(index) {
      this.ownChannels.splice(index, 1);
      // 处理我的频道的数据
      let channels = this.ownChannels.map((v, index) => {
        return { id: v.id, seq: index + 1 };
      });
      if (this.$store.state.tokenObj.token) {
        // 登陆了发请求存到库里
        let res = await setChannelAPI(channels);
        console.log(res);
      } else {
        // 没登录存储到本地,要先判断本地是否
        saveChannel(this.ownChannels);
      }
    },
  },

  // 利用计算属性做频道过滤
  computed: {
    // 计算属性：获取可选频道
    optList() {
      // 从所有频道里排除掉我的频道，剩余的就是可选频道
      // 换句话说，就过滤出来所有不在我的频道里的数据
      return this.allChannels.filter(
        (v) =>
          // 判断这个元素不在我的频道里，就过滤出来，否则不过滤出来
          this.ownChannels.findIndex((val) => val.id == v.id) == -1
      );
    },
  },
};
</script>

<style lang='less' scoped>
.pannel {
  .chaneel-titie {
    display: flex;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    margin: 0 20px;
  }
  .van-grid {
    margin: 0 10px;
    .van-grid-item {
      width: 30px;
      height: 60px;
    }
  }
  .active {
    color: #f00;
  }
  .my-item {
    position: relative;
    .van-icon {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
</style>